<template>
  <div class="upload">
    <p class="title">修改头像</p>
    <hr/>
    <div class="section">
      <el-upload drag :action="uploadUrl()" :show-file-list="false" :on-success="handleAvatorSuccess"
                 :before-upload="beforeAvatorUpload">
        <i class="el-icon-upload"></i>
        <div>
          将文件拖到此处，或<span style="color:blue">修改头像</span>
        </div>
        <div slot="tip">只能上传jpg/png文件，且不能超过10MB</div>
      </el-upload>
    </div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'
  import {mixin} from '../mixins'

  export default {
    name: 'upload',
    mixins: [mixin],
    computed: {
      ...mapGetters([
        'userId'
      ])
    },
    inject:['reload'],
    methods: {
      //上传地址
      uploadUrl() {
        return `${this.$store.state.configure.HOST}/consumer/update_pic/${this.userId}`
      },
      //上传成功
      handleAvatorSuccess(res, file) {
        if (res.code === 200) {
          // this.reload();
          /*let tmp = this.$store.state.user.avator;
          console.log(tmp);
          this.$store.commit('setAvator','');
          this.$store.commit('setAvator',tmp);*/
          location.reload();
          this.notify('修改成功', 'success');
        } else {
          this.notify('修改失败', 'error');
        }
      },
      //上传之前的校验
      beforeAvatorUpload(file) {
        const isJPG = file.type == 'image/jpeg';
        const isLt10M = file.size / 1024 / 1024 < 10;
        if (!isJPG) {
          this.notify('上传头像图片只能是JPG格式', 'error');
          return false;
        }
        if (!isLt10M) {
          this.notify('上传头像图片不能大于10MB', 'error');
          return false;
        }
        return true;
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../assets/css/upload.scss';
</style>
